<template>
	<div class="container">
		<div class="menu-wrap d-flex a-center">
			<div
				class="d-flex a-center j-center"
				:class="[index === currentIndex ? 'menu-item-active' : 'menu-item']"
				v-for="(item, index) in menuArr"
				:key="index"
				@click="onSelect(index)"
			>
				{{ item.title }}
			</div>
		</div>
		<div class="box m-t20">
			<el-table
				v-if="currentIndex === 0"
				:data="state.tableData"
				style="width: 100%"
				height="100%"
			>
				<el-table-column
					show-overflow-tooltip
					prop="projectName"
					label="项目名称"
				/>
				<el-table-column
					show-overflow-tooltip
					prop="planAmount"
					label="项目金额"
				/>
				<el-table-column
						show-overflow-tooltip
						prop="address"
						label="地址"
						width="150"
				/>
				<el-table-column
					show-overflow-tooltip
					prop="streetName"
					label="街道名称"
				/>
			</el-table>
			<div
				:style="{ opacity: currentIndex === 1 ? 1 : 0 }"
				id="myChart101"
			></div>
		</div>
	</div>
</template>

<script setup>
import { onMounted, reactive, ref } from "vue";
import { ElTable } from "element-plus";
import { cockpitApi } from "@/api/investment";
import echarts from "@/common/utils/echarts";

const props = defineProps({
	year: {
		type: String,
		default: () => {
			let date = new Date(); // 获取时间
			return date.getFullYear(); // 获取年
		},
	},
});

const currentIndex = ref(0);

const menuArr = ref([
	{
		title: "固定投资",
	},
	{
		title: "股权投资",
	},
]);

const state = reactive({
	tableData: [],
	projectType: {},
	proStockList: [],
});

let option = {
	tooltip: {
		trigger: "item",
	},
	legend: {
		orient: "vertical",
		left: "left",
	},
	series: [
		{
			name: "股权投资",
			type: "pie",
			radius: "50%",
			data: [],
			emphasis: {
				itemStyle: {
					shadowBlur: 10,
					shadowOffsetX: 0,
					shadowColor: "rgba(0, 0, 0, 0.5)",
				},
			},
		},
	],
};

/**
 * 初始化
 * @private
 */
const myChart = ref(null);
const _init = () => {
	option.series[0].data = [];
	state.proStockList.forEach((item) => {
		option.series[0].data.push({
			value: item.count || 0,
			name: item.typeName,
		});
	});

	myChart.value = echarts.init(document.getElementById("myChart101"));
	myChart.value.setOption(option);
};

/**
 * 选中
 * @param index
 */
const onSelect = (index) => {
	currentIndex.value = index;
};

/**
 * 总投资项目总数
 */
const getProjectTypeSns = (year) => {
	cockpitApi.getProjectTypeSns({ year: year }).then((res) => {
		if (res.code === "200") {
			state.tableData = res.data.proFixedList;
			state.proStockList = res.data.proStockList;
			_init();
		}
	});
};

/**
 * 搜索
 */
const onSearch = () => {
	getProjectTypeSns(props.year);
};

defineExpose({
	onSearch,
});

onMounted(() => {
	getProjectTypeSns(props.year);
});
</script>

<style lang="scss" scoped>
.el-table{
	:deep(.el-table__header-wrapper .el-table__header .el-table__cell .cell) {
		font-size: 12px;
		font-family: SourceHanSansCN-Normal, SourceHanSansCN;
		font-weight: 400;
		color: #666666;
		line-height: 18px;
	}
}

#myChart101 {
	padding: 0px;
	margin: 15px 0 0 0;
	width: 100%;
	height: 262px;
}

.container{
	.box{
		height: 262px;
	}
}

.menu-wrap {
	.menu-item {
		background-color: #e8e8e8;
		color: #bbbbbb;
		margin-left: 10px;
		padding: 5px;
		border-radius: 5px;
		cursor: pointer;
		border: 1px solid #cccccc;
	}
	.menu-item-active {
		background-color: #fff8f6;
		border: 1px solid #fc702b;
		color: #fc702b;
		padding: 5px;

		border-radius: 5px;
		margin-left: 10px;
		cursor: pointer;
	}
}
.content {
	width: 629px;
	height: 352px;
	background: #ffffff;
}
.box {
	padding: 10px 20px;
	width: 100%;
	height: 298px;
	background-color: #fff;
	border-radius: 10px;
	box-shadow: 0px 0px 12px 0 rgba(0, 0, 0, 0.05);
}
</style>
